<template>
	<view class="wrap">
		<view class="block-fh" @tap="blockFh">
			<u-icon class="block-fh-icon" size="60" color="#fff" name="arrow-right" custom-prefix="custom-icon"></u-icon>
		</view>
		<canvas class="draw" :style="{'width':windowW+'px','height':windowH+'px'}" canvas-id="share"></canvas>
		<image class="img" v-if="src" :src="src"></image>
		<view v-if="src" class="btn">
			<text @tap="saveImg" class="btn-item">{{$t('bctp')}}</text>
			<text @tap="shareImg" class="btn-item">{{$t('fxhy')}}</text>
		</view>
		<view v-if="src" @tap="copy" class="copy-btn">
			{{$t('fzyqm')}} {{userInfo.inviteCode}}
		</view>
		<!--  -->
		<view style="width:0;height: 0;overflow: hidden;">
			<tki-qrcode class="img" ref="qrcode" :val="userInfo.copyInviteUrl" :size="284" :onval="true" :loadMake="true"
			 :showLoading="true" @result="qrR"/>
		</view>
		<!--  -->
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
	import {
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				windowW: 0,
				windowH: 0,
				src: '', //生成的图片
				textWidth: 0,
				tempFilePath: '/static/loginBg.png',
				/*二维码的图片*/
				img_add:''
			};
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			this.windowW = systemInfo.windowWidth;
			this.windowH = systemInfo.windowHeight;
		},
		onReady() {},
		onShow() {
			// this.liao()
		},
		computed: {
			...mapState(['userInfo']),
			copyStyle() {
				return {
					top: (this.windowH * 0.45 - 13) + 'px',
					left: (this.windowW - this.textWidth) / 2 + this.textWidth + 5 + 'px'
				}
			}
		},
		methods: {
			qrR(e){
				console.log(e)
				this.img_add = e;
				this.liao()
			},
			liao() {
				this.$utils.loading(this.$t('zzschb'))
				this.tempFilePath = this.img_add;
				console.log(this.tempFilePath)
				this.draw();
			},
			// 复制邀请码
			copy() {
				this.$utils.copy(this.userInfo.inviteCode)
			},
			// 保存图片
			saveImg() {
				let that = this;
				uni.saveImageToPhotosAlbum({
					filePath: that.src,
					success() {
						that.$utils.toast(this.$t('bccg'))
					},
					fail() {
						that.$utils.toast(this.$t('bcsb'))
					}
				})
			},
			// 分享图片
			shareImg() {
				// #ifdef APP-PLUS
				let msg = {
					type: 'image',
					pictures: [this.src]
				}
				plus.share.sendWithSystem(msg, function() {
					console.log('分享成功');
				}, function(e) {
					console.log('分享失败：' + JSON.stringify(e));
				});
				// #endif
			},
			// 绘制
			draw() {
				let that = this;
				const ctx = uni.createCanvasContext('share')
				ctx.drawImage('/static/new_images/share-bg.png', 0, 0, this.windowW, this.windowH)
				// ctx.drawImage('/static/share-quan.png', uni.upx2px(120), uni.upx2px(170), uni.upx2px(510), uni.upx2px(674))
				ctx.drawImage(this.tempFilePath, (this.windowW - uni.upx2px(200)) / 2, this.windowH * 0.52 + uni.upx2px(200), uni.upx2px(
					200), uni.upx2px(200))
				ctx.draw(true, _ => {
					console.log('绘制完成')
					setTimeout(function() {
						uni.canvasToTempFilePath({
							canvasId: 'share',
							fileType: 'jpg',
							success: function(res) {
								// console.log(res.tempFilePath)
								uni.hideLoading()
								that.src = res.tempFilePath
								// 在这里保存图片
							},
							fail: function(error) {
								console.log(error)
								that.$utils.toast(this.$t('schbsb'))
							},
						})
					}, 100)
				})
			},
			
			blockFh(){
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		background: none;

		.draw {
			position: absolute;
			top: -9999rpx;
		}

		.img {
			width: 100%;
			height: 100%;
		}

		.copyicon {
			position: fixed;
		}

		.btn {
			position: fixed;
			left: 80rpx;
			right: 80rpx;
			bottom: 163rpx;
			display: flex;
			justify-content: space-between;

			&-item {
				width: 254rpx;
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
				border: 1px solid ;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				border-radius: 39rpx;
			}
		}

		.copy-btn {
			position: fixed;
			bottom: 50rpx;
			left: 205rpx;
			right: 205rpx;
			width: 340rpx;
			text-align: center;
			height: 63rpx;
			line-height: 63rpx;
			color: #fff;
			font-size: 24rpx;
			font-weight: bold;
			border-radius: 32rpx;
			border: 1px solid ;
		}
	}
	.block-fh{
		position: fixed;
		top: 100rpx;
		left: 40rpx;
		z-index: 9;
		.block-fh-icon{
			transform: rotate(180deg);
		}
	}
</style>
